<template>
  <div id="blocker" style="width:100%;height: 100%;position: relative">
    <div style="width:100%;height: 100%;display: block;overflow-x: hidden;overflow-y: hidden;"
         id="container">
    </div>
  </div>
</template>

<script type="module">
import * as THREE from 'three'
import Editor from './js/Editor'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';


let container, editor
let renders

let composer
const mouse = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
const BLOOM_SCENE=1;
const bloomLayer = new THREE.Layers();
bloomLayer.set( BLOOM_SCENE );
const params = {
  exposure: 1,
  bloomStrength: 2,
  bloomThreshold: 0,
  bloomRadius: 0.5,
  scene: "qwe"
};

export default {
  name: 'THREETest',
  data () {
    return {
      renderer:'',
      container:'',
      scene:'',
      camera:'',
      light:'',
      controls:''
    }
  },
  mounted () {
    window.addEventListener('resize', this.onWindowResize, false)//屏幕适应监听
    window.addEventListener('click', this.onWindowResize, false)//屏幕适应监听
    this.init()
    this.modelList()

    this.animate()
  },
  methods: {
    init(){
      container = document.getElementById( 'container' );

      this.renderer = new THREE.WebGLRenderer( { antialias: true } );
      this.renderer.setPixelRatio( window.devicePixelRatio );
      this.renderer.setSize( window.innerWidth, window.innerHeight );
      this.renderer.autoClear = false
      // this.renderer.setClearColor('#428bca',1.0);
      //renderer.toneMapping = THREE.ReinhardToneMapping;
      container.appendChild( this.renderer.domElement );

      this.scene = new THREE.Scene();

      this.camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
      this.camera.position.set(0, 2500, 0 );
      this.scene.add( this.camera );

      this.controls = new OrbitControls( this.camera, this.renderer.domElement );


      var renderScene = new RenderPass( this.scene, this.camera );

      var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
      bloomPass.threshold = params.bloomThreshold;
      bloomPass.strength = params.bloomStrength;
      bloomPass.radius = params.bloomRadius;

      composer = new EffectComposer( this.renderer );
      composer.addPass( renderScene );
      composer.addPass( bloomPass );

      // const bloomLayer = new THREE.Layers();
    },
    modelList(){
      let box=new THREE.BoxBufferGeometry(100,100,100)
      let mail=new THREE.MeshBasicMaterial({color:0x70dbdb})
      let mesh=new THREE.Mesh(box,mail)
      mesh.layers.set(0)
      this.scene.add(mesh)
      let box2=new THREE.BoxBufferGeometry(100,100,100)
      let mail2=new THREE.MeshBasicMaterial({color:0x70dbdb})
      let mesh2=new THREE.Mesh(box2,mail2)
      mesh2.layers.set(1)
      mesh2.position.x=150
      mesh2.scale.set(1,2,1)
      this.scene.add(mesh2)
    },
    animate () {
      let that = this
      renders = requestAnimationFrame(that.animate) //请求再次执行渲染函数render
      // this.renderer.render(this.scene, this.camera)//执行渲染操作
      this.renderer.clear()
      this.camera.layers.set(0)
      composer.render()

      this.renderer.clearDepth()
      this.camera.layers.set(1)
      this.renderer.render(this.scene,this.camera)
    },
    //屏幕适应
    onWindowResize () {
      this.camera.aspect = container.clientWidth / container.clientHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(container.clientWidth, container.clientHeight)
    },

  },

}
</script>
<style scoped>
</style>
